<script setup>
import { reactive, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import { useAdminStore } from '@/stores/admin'
// import { Lock, User } from "@element-plus/icons-vue"
import { User, ArrowDown, House, Box, Document, UserFilled, TrendCharts, Setting } from '@element-plus/icons-vue'

const store = useAdminStore()
const router = useRouter()
const route = useRoute()

//不显示左边菜单栏、头、脚等，url路径有哪些，需要配置
const noMenu = ['/login','/register']

const dataInfo = reactive({
  showMenu: true,
  defaultOpen: ['2'],
  currentPath: '/',
})

// 计算属性：判断是否为认证页面（登录/注册）
const isAuthPage = computed(() => {
  return ['/login', '/register'].includes(route.path)
})

//全局前置路由守卫，初始化的时候调用，每次路由切换之前被调用
router.beforeEach((to, from, next) => {
  if (to.path == '/login'||to.path == '/register') {
    // 如果路径是 /login 或 /register 则正常执行
    next()
  } else {
    // 如果不是 /login 或 /register，判断是否有 token
    if (!store.getToken || store.getToken == '') {
      // 如果没有token，说明没有登录过，则跳至登录页面 
      next({ path: '/login' }) //相当于 router.push({path: '/login'})
    } else {
      // 否则继续执行
      next()
    }
  }
  dataInfo.showMenu = !noMenu.includes(to.path)
  dataInfo.currentPath = to.path
})
</script>

<template>
  <div class="app-container">
    <!-- 登录注册页面 - 只显示路由内容 -->
    <div v-if="isAuthPage" class="auth-layout">
      <RouterView />
    </div>
    
    <!-- 后台管理页面 - 显示完整布局 -->
    <div v-else class="admin-layout">
      <!-- 使用自定义Header组件 -->
      <Header />
      
      <div class="admin-content">
        <!-- 侧边栏导航 -->
        <div class="admin-sidebar" v-if="dataInfo.showMenu">
          <el-menu
            :default-active="dataInfo.currentPath"
            class="admin-menu"
            background-color="#2c3e50"
            text-color="#bdc3c7"
            active-text-color="#3498db"
            router
          >
            <el-menu-item index="/">
              <el-icon><House /></el-icon>
              <span>主页</span>
            </el-menu-item>
            <el-sub-menu index="2">
              <template #title>
                <el-icon><Box /></el-icon>
                <span>商品管理</span>
              </template>
              <el-menu-item index="/product-management">商品列表</el-menu-item>
              <el-menu-item index="/brand-management">品牌管理</el-menu-item>
              <el-menu-item index="/type-management">类型管理</el-menu-item>
            </el-sub-menu>
            <el-menu-item index="/order-management">
              <el-icon><Document /></el-icon>
              <span>订单管理</span>
            </el-menu-item>
            <el-sub-menu index="4">
              <template #title>
                <el-icon><Box /></el-icon>
                <span>物流管理</span>
              </template>
              <el-menu-item index="/advertiser-management">广告商管理</el-menu-item>
              <el-menu-item index="/logistics-info-management">物流信息</el-menu-item>
            </el-sub-menu>
            <el-menu-item index="/user-management">
              <el-icon><UserFilled /></el-icon>
              <span>用户管理</span>
            </el-menu-item>
            <el-sub-menu index="5">
              <template #title>
                <el-icon><TrendCharts /></el-icon>
                <span>营销报表</span>
              </template>
              <el-menu-item index="/performance-report">业绩报表</el-menu-item>
              <el-menu-item index="/marketing-report">营销报表</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="7">
              <template #title>
                <el-icon><UserFilled /></el-icon>
                <span>管理员账户</span>
              </template>
              <el-menu-item index="/permission-management">权限管理</el-menu-item>
              <el-menu-item index="/admin-account-management">管理员列表</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </div>

        <!-- 主要内容区域 - 显示路由组件 -->
        <div class="main-content">
          <RouterView />
        </div>
      </div>
      
      <!-- 使用自定义Footer组件 -->
      <Footer />
    </div>
  </div>
</template>

<style scoped>
.app-container {
  height: 100vh;
}

/* 认证页面样式 */
.auth-layout {
  height: 100vh;
  overflow: hidden;
}

/* 后台管理布局样式 */
.admin-layout {
  height: 100vh;
  background-color: #f4f6f9;
  display: flex;
  flex-direction: column;
}

.admin-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.admin-sidebar {
  width: 200px;
  background-color: #2c3e50;
  box-shadow: 2px 0 4px rgba(0,0,0,0.1);
  flex-shrink: 0;
  overflow-y: auto;
  max-height: 100%;
}

.admin-menu {
  border: none;
  min-height: 100%;
}

.main-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

/* 确保下拉菜单样式正常显示 */
:deep(.el-dropdown-menu) {
  margin-top: 10px;
}

/* 调整菜单hover效果 */
:deep(.el-menu-item:hover) {
  background-color: rgba(52, 152, 219, 0.2) !important;
}

/* 自定义滚动条样式 */
.admin-sidebar::-webkit-scrollbar {
  width: 6px;
}

.admin-sidebar::-webkit-scrollbar-track {
  background: #2c3e50;
}

.admin-sidebar::-webkit-scrollbar-thumb {
  background: #34495e;
  border-radius: 3px;
}

.admin-sidebar::-webkit-scrollbar-thumb:hover {
  background: #4a5f7a;
}
</style>